<template>
  <div v-if="item.type === FormStyle.SELECTTREE">
    <template v-if="!item.isShowCallBack || item.isShowCallBack()">
      <template v-if="item.multiple">
        <SelectVxeTreeMany
          v-model="form[keys.slice(-1)]"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          :readonly="item.readonly"
          :searchable="item.treesearchable"
          :style="{ width: (item.width || 160) + 'px' }"
          :url="item.dictUrl"
          @on-change="$event => onHandleChange(item, $event)"
        />
      </template>
      <template v-else>
        <SelectVxeTreeOne
          v-model="form[keys.slice(-1)]"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          :query-form="item.queryForm"
          :readonly="item.readonly"
          :searchable="item.treesearchable"
          :style="{ width: (item.width || 160) + 'px' }"
          :url="item.dictUrl"
          @on-change="$event => onHandleChange(item, $event)"
        />
      </template>
    </template>
  </div>
  <div v-else-if="item.type === FormStyle.SELECT">
    <CommonSelect
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      v-model="form[keys.slice(-1)]"
      :dict-code="item.dictCode"
      :dict-url="item.dictUrl"
      :disabled="item.disabled"
      :opition-list="item.opitionList"
      :placeholder="item.placeholder"
      :readonly="item.readonly"
      :style="{ width: (item.width || 160) + 'px' }"
      @change="$event => onHandleChange(item, $event)"
    />
  </div>
  <div v-else-if="item.type === FormStyle.DATE">
    <CommonDatePicker
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      v-model="form[keys.slice(-1)]"
      v-model:subName="form[subKeys.slice(-1)]"
      :date-format="item.dateFormat || 'YYYY-MM-DD'"
      :date-value-formate="item.dateValueFormate || 'YYYY-MM-DD'"
      :disabled="item.disabled"
      :end-placeholder="item.endPlaceholder"
      :placeholder="item.placeholder"
      :readonly="item.readonly"
      :start-placeholder="item.startPlaceholder"
      :type="item.dateType || 'date'"
      @change="$event => onHandleChange(item, $event)"
    />
  </div>
  <div v-else-if="item.type !== FormStyle.HIDDEN">
    <el-input
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      v-model="form[keys.slice(-1)]"
      clearable
      :placeholder="item.placeholder"
      :style="{ width: (item.width || 160) + 'px' }"
      @change="$event => onHandleChange(item, $event)"
      @keyup.enter="onHandleQueryData"
    />
  </div>
</template>

<script>
import { FormStyle } from "@/plugins/commonType.enum.ts";
import CommonDatePicker from "@/plugins/form/components/CommonDatePicker.vue";
import CommonSelect from "@/plugins/form/components/CommonSelect.vue";
import SelectVxeTreeOne from "@/plugins/tree/SelectVxeTreeOne.vue";
import SelectVxeTreeMany from "@/plugins/tree/SelectVxeTreeMany.vue";
export default defineComponent({
  name: "CommonFormItem",
  components: {
    CommonSelect,
    SelectVxeTreeOne,
    SelectVxeTreeMany,
    CommonDatePicker
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {
        return {};
      }
    },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },

  emits: {
    "update:model-value": null,
    "on-handle-change-value": null,
    "on-handle-query-data": null
  },

  setup(props, { emit }) {
    const isShowWordLimit = computed(() => {
      const { showWordLimit, type, maxlength } = props.item;
      const isNotHasValue = showWordLimit ?? true;
      if (!isNotHasValue || showWordLimit) {
        return showWordLimit;
      }
      if (!showWordLimit && isNotHasValue) {
        return type === TableColumnOrFormTypeEnum.TEXTAREA && !!maxlength;
      }
    });

    const keys = computed(() => {
      const keyArray = props.item.name?.split(".") || [];
      return keyArray;
    });

    /**
     * 日期组件range第二个参数
     */
    const subKeys = computed(() => {
      const keyArray = props.item.subName?.split(".") || [];
      return keyArray;
    });

    const onHandleChange = (item, $event) => {
      const params = { ...item, $event };
      emit("on-handle-change-value", params);
    };

    const getObjectKeyValue = () => {
      if (!keys.value || !keys.value.length) return {};
      const { modelValue } = props;
      const currentKeys = keys.value.slice(0, -1);
      if (!currentKeys || !currentKeys.length) {
        return modelValue;
      }
      const currentForm = currentKeys.reduce((pre, cur) => {
        return pre ? pre[cur] : undefined;
      }, modelValue);
      return currentForm;
    };

    const form = ref(getObjectKeyValue());

    const onHandleQueryData = () => {
      emit("on-handle-query-data");
    };

    watch(
      () => props.modelValue,
      () => {
        form.value = getObjectKeyValue();
      },
      {
        deep: true
      }
    );

    return {
      keys,
      subKeys,
      form,
      isShowWordLimit,
      FormStyle,
      onHandleChange,
      onHandleQueryData
    };
  }
});
</script>

<style lang="scss" scoped></style>
